<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day1</title>
    <style>
    body{
    padding:0;
    margin:0;

    }
    *{
        box-sizing:border-box;
    }
    .box{
    width:1200px;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    border: 1px solid aqua;

    }
    .list{
    width:20%;
    height:300px;
     border: 1px solid red;
    }
    .img{
        width:100%;
        height:80%;
        overflow: hidden;

    }
    a{
        color: grey;
    }
    </style>
</head>
<body>
<!--电影推荐系统-->

<div class="box">
{%for i in range(datas|length) datas%}
    <div class="list">
        <div class="img">
            <img src="../static/imgs/{{datas[i].img}}" alt="">
        </div>
        <div class="title">
            <h3>长津湖</h3>
        </div>
        <div><a href=""/tuijian/{{i}}"">推荐电影</a></div>
         {%endfor%}
    </div>

    <div class="list">
        <div class="img">
            <img src="../static/imgs/2.jpg" alt="">
        </div>
        <div class="title">
            <h3>唐人间探案</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../static/imgs/3.jpg" alt="">
        </div>
        <div class="title">
            <h3>人生大事</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../static/imgs/4.jpg" alt="">
        </div>
        <div class="title">
            <h3>昨日青空</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../static/imgs/5.jpg" alt="">
        </div>
        <div class="title">
            <h3>大江大海</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../static/imgs/6.jpg" alt="">
        </div>
        <div class="title">
            <h3>一秒钟</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>
    <div class="list">
        <div class="img">
            <img src="../static/imgs/4.jpg" alt="">
        </div>
        <div class="title">
            <h3>人生大事</h3>
        </div>
        <div><a>推荐电影</a></div>
    </div>

</div>


</body>
</html>